/**
 * 预览图片
 * 调用方法：
 * import { modalOpen, modalClose } from '../../util/global';
 * modalOpen({
 *   Type: () => <Gallery index={1} images={[{ url: '' }]} close={modalClose} />,
 * });
 */

import React, { ReactElement } from 'react';
import ImageViewer from 'react-native-image-zoom-viewer';
import { IImageInfo } from 'react-native-image-zoom-viewer/src/image-viewer.type';
import { getScreenInfo, ScreenOrientation } from '../../util/screen';
import navigator from '../../util/navigator';
import { getRouteType, RouteType } from '../../config/route';

interface Gallery {
  images: IImageInfo[]; // 图片列表
  index?: number; // 定位到具体某一张
  close: () => void;
}

const Gallery = (props: Gallery): ReactElement => {
  const { images, index = 0, close = (): void => {} } = props;

  const currentRoute = navigator.getCurrentRoute();
  const routeType = getRouteType(currentRoute.routeName);

  let screenOrientation = ScreenOrientation.Portrait;
  if (routeType === RouteType.LandScape) {
    screenOrientation = ScreenOrientation.Landscape;
  }

  const { width, height } = getScreenInfo({ screenOrientation });

  return (
    <ImageViewer
      imageUrls={images}
      backgroundColor="transparent"
      style={{ width, height }}
      onClick={close}
      onSwipeDown={close}
      enableSwipeDown
      index={index}
      swipeDownThreshold={height / 2 - 50}
    />
  );
};

export default Gallery;
